<docs>
  ## 首页
</docs>
<template>
  <!-- 内边距container 开始 -->
  <div class="container">
    <my-bread title="职位搜索" isToHome="1"></my-bread>
    <!-- 搜索 -->
    <div class="search">
      <input
        class="searchBar"
        v-model="form.qwgjz"
        @change="changeInput = '1'"
        @click="GET_history(1)"
        placeholder="请输入您要查询的岗位、单位"
        ref="searchInput"
      />
      <!-- <p class="input_tip">请输入您要查询的岗位、单位 <span></span></p> -->
      <i class="iconfont icon-search" @click="GET_history(1)"></i>
    </div>
    <div class="iContent" ref="scoll">
      <div class="bar_wrap">
        <div
          :class="[arrow_flag == 1 && showFlag ? 'item _active' : 'item']"
          @click="point(1)"
        >
          地区
          <i class="arrow"></i>
        </div>
        <div
          :class="[arrow_flag == 2 && showFlag ? 'item _active' : 'item']"
          @click="point(2)"
        >
          职业
          <i class="arrow"></i>
        </div>
        <div
          :class="[arrow_flag == 3 && showFlag ? 'item _active' : 'item']"
          @click="point(3)"
        >
          行业
          <i class="arrow"></i>
        </div>
        <div
          :class="[arrow_flag == 4 && showFlag ? 'item _active' : 'item']"
          @click="point(4)"
        >
          薪酬
          <i class="arrow"></i>
        </div>
        <div
          :class="[arrow_flag == 5 && showFlag ? 'item _active' : 'item']"
          @click="point(5)"
        >
          更多
          <i class="arrow"></i>
        </div>
      </div>
      <!-- 工作地点 -->
      <div class="search-select-wrap" v-show="arrow_flag == 1 && showFlag">
        <div class="search-select" @click.stop>
          <div class="search-more area clearfix">
            <span style="font-weight: bold" @click="reSet('gzdd')">全部</span>
            <span
              :class="{ active: dqclassArr.indexOf(item.dmid) != -1 }"
              v-for="item in objSearchAll.cdg_regioncode"
              :key="item.dmmc"
              @click="searchOption(item.dmid, 'gzdd')"
              >{{ item.dmmc }}</span
            >
          </div>
          <div class="search_btn_wrap">
            <div @click="reSet('gzdd')">重置</div>
            <div @click="befor_search()">确定</div>
          </div>
        </div>
      </div>
      <!-- 职业 -->
      <div class="search-select-wrap" v-show="arrow_flag == 2 && showFlag">
        <div class="search-select">
          <div class="search-select-content">
            <div class="select-content-left">
              <p
                :class="resetObj.dwzy == item.dmid ? 'active' : ''"
                v-for="item in objSearchAll.zyjsww_wh_cygwxxb"
                :key="item.dmid"
                @click="searchOption(item.dmid, 'dwzy')"
              >
                {{ item.dmmc }}
              </p>
            </div>
            <div class="select-content-right">
              <p
                :class="{ active: zyclassArr.indexOf(item.dmid) != -1 }"
                v-for="item in objSearchAll.zyjsww_wh_cygwxxb_two"
                :key="item.dmid"
                @click="searchOption(item.dmid, 'dwzy', true)"
              >
                {{ item.dmmc }}
              </p>
            </div>
          </div>
          <div class="search_btn_wrap">
            <div @click="reSet('dwzy')">重置</div>
            <div @click="befor_search()">确定</div>
          </div>
        </div>
      </div>
      <!-- 行业 -->
      <div class="search-select-wrap" v-show="arrow_flag == 3 && showFlag">
        <div class="search-select">
          <div class="search-select-content">
            <div class="select-content-left">
              <p
                :class="resetObj.dwhy == item.dmid ? 'active' : ''"
                v-for="item in objSearchAll.cdg_industry_all"
                :key="item.dmid"
                @click="searchOption(item.dmid, 'dwhy')"
              >
                {{ item.dmmc }}
              </p>
            </div>
            <div class="select-content-right">
              <p
                :class="{ active: hyclassArr.indexOf(item.dmid) != -1 }"
                v-for="item in objSearchAll.cdg_industry_all_two"
                :key="item.dmid"
                @click="searchOption(item.dmid, 'dwhy', true)"
              >
                {{ item.dmmc }}
              </p>
            </div>
          </div>
          <div class="search_btn_wrap">
            <div @click="reSet('dwhy')">重置</div>
            <div @click="befor_search()">确定</div>
          </div>
        </div>
      </div>
      <!-- 薪资 -->
      <div class="search-select-wrap" v-show="arrow_flag == 4 && showFlag">
        <div class="search-select">
          <co-form :model="form" ref="form">
            <co-input
              prop
              label="月薪起"
              type="tel"
              v-model="form.zdyx"
              placeholder="请输入月薪起"
            ></co-input>
            <co-input
              prop
              label="月薪止"
              type="tel"
              v-model="form.zgyx"
              placeholder="请输入月薪止"
            ></co-input>
          </co-form>
          <div class="search_btn_wrap">
            <div @click="reSet('zdyx,zgyx')">重置</div>
            <div @click="befor_search()">确定</div>
          </div>
        </div>
      </div>
      <!-- 其他 -->
      <div class="search-select-wrap" v-show="arrow_flag == 5 && showFlag">
        <div class="search-select">
          <div class="search-more clearfix">
            <p>学历：</p>
            <span
              :class="resetObj.whcd == item.dmid ? 'active' : ''"
              v-for="item in objSearchAll.zyjsww_d_xlyq"
              :key="item.dmid"
              @click="searchOption(item.dmid, 'whcd')"
              >{{ item.dmmc }}</span
            >
          </div>
          <div class="search-more clearfix">
            <p>发布时间：</p>
            <span
              :class="resetObj.fbsj == item.dmid ? 'active' : ''"
              v-for="item in objSearchAll.zyjsww_d_zyfbsj"
              :key="item.dmid"
              @click="searchOption(item.dmid, 'fbsj')"
              >{{ item.dmmc }}</span
            >
          </div>
          <div class="search-more clearfix">
            <p>用工形式：</p>
            <span
              :class="resetObj.ygxs == item.dmid ? 'active' : ''"
              v-for="item in objSearchAll.zyjs_d_dwygxs"
              :key="item.dmid"
              @click="searchOption(item.dmid, 'ygxs')"
              >{{ item.dmmc }}</span
            >
          </div>
          <div class="search-more clearfix">
            <p>单位性质：</p>
            <span
              :class="resetObj.dwxz == item.dmid ? 'active' : ''"
              v-for="item in objSearchAll.cdl_orgtype"
              :key="item.dmid"
              @click="searchOption(item.dmid, 'dwxz')"
              >{{ item.dmmc }}</span
            >
          </div>
          <div class="search_btn_wrap">
            <div @click="reSet('whcd,ygxs,dwxz,fbsj')">重置</div>
            <div @click="befor_search()">确定</div>
          </div>
        </div>
      </div>
      <pagination-list
        @pullingDown="asyncFetch"
        :no-data="noData"
        class="search-result"
        :ajax-loading="ajaxLoading"
      >
        <position
          v-for="(item, index) in zpxx"
          :key="index"
          :job="item.gwmc"
          :money="item.xc"
          :company="item.dwmc"
          :gzdq="item.gzdq"
          :dwdjid="item.dwdjid"
          :zpgwid="item.zpgwid"
          :sftxtdjl="item.sftxtdjl"
          :sfytdjl="item.sfytdjl"
          :entity="entity"
          :xl="item.whcd"
          :sfjpgw="item.sfjpgw"
          :zplxrdh="item.zplxrdh"
          :sfyjycsqy="item.sfyjycsqy"
          :gwfbsj="item.gwfbsj"
          :sfdl="item.sfdl"
          :ygxs="item.ygxs"
          :lxdhtx="item.lxdhtx"
          v-model="val"
          @link="link_bank"
        ></position>
      </pagination-list>
      <!-- 投递简历弹框 -->
      <sub-confirm
        :visible.sync="visibleResume"
        :jlxx="jlxx"
        @qrtd="toudi"
      ></sub-confirm>
      <!-- 搜索历史 -->
      <search-history
        :visible.sync="visibleHistory"
        :qwgjz.sync="form.qwgjz"
        :List="historyList"
        @search="GET_search"
      ></search-history>
    </div>
  </div>
</template>
<script>
import Position from "base/job/jobList";
import $ from "@/common/js/axios";
import { validator } from "common/js/valid";
import coForm from "base/form/form";
import coInput from "base/form/input";
import PaginationList from "base/paginationList/paginationList";
import searchHistory from "base/searchHistory/history";

export default {
  name: "search",
  components: { Position, PaginationList, coForm, coInput, searchHistory },
  data() {
    return {
      changeInput: "",
      visibleResume: false,
      historyList: {}, //历史搜索数据
      visibleHistory: false, //历史搜索弹框
      entity: {},
      val: {},
      zpxx: [],
      jlxx: {},
      ajaxLoading: false,
      noData: false,
      dqclassArr: [],
      hyclassArr: [],
      zyclassArr: [],
      resetObj: {
        gzdd: "",
        dwhy: "",
        dwxz: "",
        // qygm: "",
        ygxs: "",
        whcd: "",
        zdyx: "",
        zgyx: "",
        // dwzy: "",
        fbsj: "",
        xcfw: "",
      },
      objSearchAll: {
        cdg_regioncode: [],
        cdg_industry_all: [],
        cdg_industry_all_two: [],
        zyjsww_wh_cygwxxb: [],
        zyjsww_wh_cygwxxb_two: [],
        cdl_orgtype: [],
        // zyjs_d_qygm: [],
        zyjs_d_dwygxs: [],
        zyjsww_d_xlyq: [], //学历
        zyjsww_d_zyfbsj: [], //发布时间
        // zyjs_d_qwxcqj: [] //薪酬范围
      },
      form: {
        sslx: "2",
        qwgjz: "",
        dwhy: [],
        dwzy: [],
        gzdd: [],
        dwxz: "",
        // qygm: "",
        ygxs: "",
        zgyx: "",
        zdyx: "",
        whcd: "",
        xcfw: "",
        fbsj: "",
        sfsccx: 1,
        pageNum: 1,
        pageSize: "10",
      },
      gwxx: {
        jlid: "",
        zpgwid: "",
        sftxtdjl: "", //是否提醒投递简历   0 提醒；  1不提醒
      },
      arrow_flag: "",
      showFlag: false,
    };
  },
  watch: {
    val: function (val) {
      this.gwxx.zpgwid = val.zpgwid;
      this.gwxx.sftxtdjl = val.sftxtdjl;
      if (val.sftxtdjl === "0") {
        this.visibleResume = true;
      } else {
        this.visibleResume = false;
        this.toudi(1);
      }
    },
    visibleHistory: function (val) {
      if (val) {
        this.$modalHelper.afterOpen();
      } else {
        this.$modalHelper.beforeClose();
      }
    },
  },
  methods: {
    befor_search() {
      this.$modalHelper.beforeClose();
      this.GET_search();
    },
    // 投递简历
    toudi(data) {
      this.$loading = true;
      data ? (this.gwxx.sftxtdjl = "1") : (this.gwxx.sftxtdjl = "0");
      $.post("/grgl/jltdxxBc", this.gwxx)
        .then((res) => {
          if (+res.returnCode === 1) {
            this.visibleResume = false;
            this.$alert(res.returnData.message);
            var _pag = sessionStorage.setItem("page", 1);
            this.zpxx = [];
            this.get_Online(_pag);
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // 搜索历史，职位
    GET_history(flag) {
      this.$loading = true;
      this.$http
        .get("/grgl/sshxCx")
        .then((res) => {
          const data = res.returnData;
          // 无查询结果
          this.visibleHistory = true;
          if (+data.executeResult === 1) {
            this.visibleHistory = true;
            this.historyList = data.zpxx; //岗位
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // link_bank跳转
    link_bank(gwid, dwid) {
      sessionStorage.setItem("entity", JSON.stringify(this.entity));
      this.$router.push({
        name: "newjobDetail",
        query: { dm: gwid, _id: dwid },
      });
    },
    point(num) {
      this.$modalHelper.afterOpen();
      if (num != this.arrow_flag) {
        this.showFlag = true;
      } else {
        this.showFlag = !this.showFlag;
      }
      if (!this.showFlag) {
        setTimeout(() => {
          if (
            this.$refs.scoll.scrollHeight + 376 >
            this.$store.state.winHeight
          ) {
            this.$modalHelper.beforeClose();
          }
        }, 100);
      }
      this.arrow_flag = num;
    },
    reSet(type) {
      this.$modalHelper.beforeClose();
      if (type == "dwhy") {
        this.hyclassArr = [];
        this.form.dwhy = [];
        this.$http
          .get("/dmbgl/ycjdmbCx", {
            params: {
              table_name: "cdg_industry_all",
            },
          })
          .then((res) => {
            this.objSearchAll.cdg_industry_all = res.returnData.dmblb;
            this.resetObj.dwhy = this.objSearchAll.cdg_industry_all[0].dmid;
          })
          .finally(() => {
            this.$loading = false;
          });
      } else if (type == "dwzy") {
        this.zyclassArr = [];
        this.form.dwzy = [];
        this.$http
          .get("/dmbgl/ycjdmbCx", {
            params: {
              table_name: "zyjsww_wh_cygwxxb",
            },
          })
          .then((res) => {
            this.objSearchAll.zyjsww_wh_cygwxxb = res.returnData.dmblb;
            this.resetObj.dwzy = this.objSearchAll.zyjsww_wh_cygwxxb[0].dmid;
          })
          .finally(() => {
            this.$loading = false;
          });
      } else if (type == "gzdd") {
        this.dqclassArr = [];
        this.form.gzdd = [];
      } else {
        var arr = type.split(",");
        for (let i in arr) {
          this.form[arr[i]] = "";
        }
      }
      this.GET_search(1);
    },
    getDmb() {
      this.$http
        .get("/dmbgl/ycjdmbCx", {
          params: {
            table_name: "cdg_regioncode",
            dmid: "110000000000",
          },
        })
        .then((res) => {
          this.objSearchAll.cdg_regioncode = res.returnData.dmblb;
          this.objSearchAll.cdg_regioncode.unshift({ dmmc: "北京市", dmid: '110000000000' });
          console.log(this.objSearchAll.cdg_regioncode)
          // this.objSearchAll.cdg_regioncode.unshift({dmmc:'全部'});
          // this.objSearchAll.cdg_regioncode.push({dmmc:'其他地区'});
        })
        .finally(() => {
          this.$loading = false;
        });
      this.$http
        .get("/dmbgl/dmblbCx", {
          params: {
            table_name:
              "zyjs_d_dwygxs,cdl_orgtype,zyjsww_d_xlyq,zyjsww_d_zyfbsj",
          },
        })
        .then((res) => {
          // this.objSearchAll.zyjs_d_qygm = res.returnData.dmblb.zyjs_d_qygm;
          this.objSearchAll.zyjs_d_dwygxs = res.returnData.dmblb.zyjs_d_dwygxs;
          this.objSearchAll.cdl_orgtype = res.returnData.dmblb.cdl_orgtype;
          this.objSearchAll.zyjsww_d_xlyq = res.returnData.dmblb.zyjsww_d_xlyq;
          this.objSearchAll.zyjsww_d_zyfbsj =
            res.returnData.dmblb.zyjsww_d_zyfbsj;
          // this.objSearchAll.zyjs_d_qwxcqj = res.returnData.dmblb.zyjs_d_qwxcqj;
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    searchOption(item, type, flag) {
      if (type == "gzdd") {
        this.setClass(item, this.dqclassArr);
        this.form[type] = this.dqclassArr;
      } else if (type == "dwhy" && flag) {
        this.setClass(item, this.hyclassArr);
        // this.form[type] = JSON.stringify(this.hyclassArr);
        this.form[type] = this.hyclassArr;
      } else if (type == "dwzy" && flag) {
        this.setClass(item, this.zyclassArr);
        this.form[type] = this.zyclassArr;
      } else if (type == "dwhy" && !flag) {
        this.resetObj[type] = item;
        this.$http
          .get("/dmbgl/ycjdmbCx", {
            params: {
              table_name: "cdg_industry_all",
              dmid: item,
            },
          })
          .then((res) => {
            this.objSearchAll.cdg_industry_all_two = res.returnData.dmblb;
          })
          .finally(() => {
            this.$loading = false;
          });
      } else if (type == "dwzy" && !flag) {
        this.resetObj[type] = item;
        this.$http
          .get("/dmbgl/ycjdmbCx", {
            params: {
              table_name: "zyjsww_wh_cygwxxb",
              dmid: item,
            },
          })
          .then((res) => {
            this.objSearchAll.zyjsww_wh_cygwxxb_two = res.returnData.dmblb;
          })
          .finally(() => {
            this.$loading = false;
          });
      } else {
        // this.showFlag = 0;
        this.resetObj[type] = item;
        this.form[type] = item;
      }
    },
    //获取简历信息列表
    Resume_list() {
      $.get("/grgl/jlxxCx").then((res) => {
        const data = res.returnData;
        this.jlxx = data.jlxx;
        this.gwxx.jlid = this.jlxx.jlid;
      });
    },
    // 搜索职位 判断条件
    GET_search(page, i) {
      if (isNaN(this.form.zdyx)) {
        this.$alert("月薪起请输入数字");
        return false;
      }
      if (isNaN(this.form.zgyx)) {
        this.$alert("月薪止请输入数字");
        return false;
      }
      if (this.form.zdyx.length > 7) {
        this.$alert("月薪起长度超过7位");
        return false;
      }
      if (this.form.zgyx.length > 7) {
        this.$alert("月薪止长度超过7位");
        return false;
      }
      if (parseInt(this.form.zdyx) > parseInt(this.form.zgyx)) {
        this.$alert("月薪起不能大于月薪止");
        return false;
      }
      if (parseInt(this.form.zdyx) > parseInt(this.form.zgyx)) {
        this.$alert("月薪止不能小于月薪起");
        return false;
      }
      this.get_Online(page, i);
    },
    //搜索职位 请求接口
    get_Online(page = 1, i) {
      const GET_session = sessionStorage.getItem("qwgjz");
      this.form.pageNum = page;
      if (
        !this.changeInput &&
        GET_session &&
        GET_session != "undefined" &&
        this.$route.query.obj != "1"
      ) {
        this.form.qwgjz = GET_session;
      }
      if (page == 1 && i) {
        this.zpxx = [];
        this.form.qwgjz = i;
      }
      this.$loading = true;
      this.ajaxLoading = true;
      $.post("/grgl/zpxxSs", this.form)
        .then((res) => {
          this.form.sfsccx = "";
          sessionStorage.setItem("qwgjz", this.form.qwgjz);
          sessionStorage.setItem("page", page);
          const data = res.returnData;
          // 无查询结果
          if (+data.executeResult === 0) {
            this.noData = true;
            if (page === 1) {
              this.zpxx = [];
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.zpxx = data.zpxx;
            } else {
              this.zpxx = this.zpxx.concat(data.zpxx);
            }
            this.entity = data.entity;
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
          this.$loading = false;
        });

      this.showFlag = false;
    },
    // async fetach data
    asyncFetch() {
      var page = +sessionStorage.getItem("page");
      page = page + 1;
      this.GET_search(page);
    },
    //二级代码表
    secondDmb() {
      this.$http
        .get("/dmbgl/ycjdmbCx", {
          params: {
            table_name: "cdg_industry_all",
          },
        })
        .then((res) => {
          this.objSearchAll.cdg_industry_all = res.returnData.dmblb;
          if (!this.form.dwhyfjdmid) {
            this.resetObj.dwhy = this.objSearchAll.cdg_industry_all[0].dmid;
          }
          //查二级
          this.$http
            .get("/dmbgl/ycjdmbCx", {
              params: {
                table_name: "cdg_industry_all",
                dmid: this.resetObj.dwhy,
              },
            })
            .then((res) => {
              this.objSearchAll.cdg_industry_all_two = res.returnData.dmblb;
            });
        })
        .finally(() => {
          this.$loading = false;
        });
      this.$http
        .get("/dmbgl/ycjdmbCx", {
          params: {
            table_name: "zyjsww_wh_cygwxxb",
          },
        })
        .then((res) => {
          this.objSearchAll.zyjsww_wh_cygwxxb = res.returnData.dmblb;
          if (!this.form.dwzyfjdmid) {
            this.resetObj.dwzy = this.objSearchAll.zyjsww_wh_cygwxxb[0].dmid;
          }
          //查二级
          this.$http
            .get("/dmbgl/ycjdmbCx", {
              params: {
                table_name: "zyjsww_wh_cygwxxb",
                dmid: this.resetObj.dwzy,
              },
            })
            .then((res) => {
              this.objSearchAll.zyjsww_wh_cygwxxb_two = res.returnData.dmblb;
            });
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // 类名多选
    setClass(item, arr) {
      if (arr.indexOf(item) != -1) {
        arr.splice(arr.indexOf(item), 1);
      } else {
        arr.push(item);
      }
    },
  },
  created() {
    // this.form.qwgjz = this.$store.getters.qwgjz;
    if (this.$route.query.obj == "1") {
      //相似岗位跳转 带obj； 职位详情页面的返回查询相似
      var session_entity = sessionStorage.getItem("entity");
      if (session_entity) {
        this.form = JSON.parse(sessionStorage.getItem("entity"));
        if (this.form.zgyx == 0) this.form.zgyx = "";
      }
      this.get_Online();
    } else {
      this.GET_search();
    }
    this.getDmb();
    this.secondDmb();
  },
  mounted() {
    this.$refs.searchInput.focus();
    this.Resume_list();
    Object.keys(this.resetObj).forEach((item) => {
      this.resetObj[item] = this.form[item];
    });
    this.dqclassArr = this.form.gzdd;
    this.resetObj.dwhy = this.form.dwhyfjdmid;
    this.hyclassArr = this.form.dwhy;
    this.resetObj.dwzy = this.form.dwzyfjdmid;
    this.zyclassArr = this.form.dwzy;
  },
  // 跳转路由处理
  /* eslint-disable consistent-return */
  beforeRouteLeave(to, from, next) {
    this.$modalHelper.beforeClose();
    next();
  },
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.container {
  // padding: $padding-base;
  .search {
    height: $height-input + $radius-base;
    padding: 0 $padding-base;
    position: relative;
    background: linear-gradient(90deg, #1d66d4, #00baff);
    .input_tip {
      display: inline-block;
      position: absolute;
      top: $radius-base2;
      left: $padding-btn;
      font-size: $font-size-small;
      color: $color-text-placeholder;
      span {
        display: inline-block;
        vertical-align: sub;
        margin-left: $radius-base;
        height: $font-size-base;
        width: $font-size-base;
        background: url("~common/images/close.png") no-repeat;
        background-size: 100%;
      }
    }
    .searchBar {
      box-sizing: border-box;
      background-color: #fff;
      width: 100%;
      border-radius: $padding-base * 2;
      font-size: $font-size-base;
      height: 66px;
      line-height: 66px;
      padding-left: $padding-base;
    }
    input::-webkit-input-placeholder {
      color: rgba(204, 204, 204, 1);
    }
    .iconfont {
      box-sizing: border-box;
      position: absolute;
      right: $padding-base;
      top: 1px;
      font-size: 44px;
      width: $font-size-larges * 2;
      height: $height-input_base * 2;
      line-height: $height-input_base * 2;
      color: #fff;
      text-align: center;
      border-radius: 0 $padding-base * 2 $padding-base * 2 0;
      background-color: #002c6e;
    }
  }
  .iContent {
    background-color: #f1f1f1;
    // padding: 0 $height-base/10;
    min-height: 80vh;
    overflow: hidden;
    .bar_wrap {
      display: flex;
      padding: 0 $line-height/2;
      background: #fff;
      border-radius: $radius-base3 $radius-base3 0 0;
      .item {
        // text-align: center;
        flex: 1;
        box-sizing: border-box;
        font-size: $font-size-ultra / 2;
        padding: $height-base/5 * 2 0 $font-size-large $padding-btn;
        position: relative;
        color: $color-text-title;
        background-color: #fff;
        transition: $transition;
        border-bottom: 1px solid $color-text-placeholder;
        transition: transform 0.3s;
        i {
          display: inline-block;
          height: $line-height-base;
          width: $line-height-base;
          vertical-align: middle;
        }
        .arrow::before {
          position: absolute;
          transition: transform 0.3s;
          transform-origin: 20% 40%;
          content: "";
          width: $padding-base;
          height: $padding-base;
          border-top: 2px solid #ccc;
          border-left: 2px solid #ccc;
          transform: rotate(-135deg);
          top: $font-size-base * 2;
          right: $radius-base2;
        }
      }
      .item:after {
        content: "|";
        color: $color-text-placeholder;
        position: absolute;
        right: 0;
      }
      .item:last-child:after {
        content: "";
      }
      ._active {
        color: #3366cc;
        transition: transform 0.3s;
        .arrow::before {
          position: absolute;
          transition: transform 0.3s;
          transform-origin: 20% 40%;
          content: "";
          width: $padding-base;
          height: $padding-base;
          border-top: 2px solid #ccc;
          border-left: 2px solid #ccc;
          transform: rotate(45deg);
          top: $font-size-base * 2;
          right: $radius-base2;
        }
      }
    }

    .search-select-wrap {
      position: fixed;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      z-index: 10;
      background: rgba($color: #000000, $alpha: 0.8);
    }
    .search-select {
      width: 100%;
      // max-height: $height-div * 12;
      background-color: #fff;
      color: #3366cc;
      border-radius: 0 0 $radius-base3 $radius-base3;
      overflow: auto;
      .search-select-content {
        height: $height-div * 10;
        width: 100%;
        background-color: #f4f4f4;
        .select-content-left {
          float: left;
          height: 100%;
          width: 50%;
          // padding-right: $font-size-ultra-plus/4;
          box-sizing: border-box;
          overflow: auto;
          p {
            padding: $font-size-base $radius-base4;
            background-color: #fff;
            color: #333;
            margin-top: 1px;
          }
          .active {
            color: #3366cc;
          }
        }
        .select-content-right {
          float: right;
          height: 100%;
          width: 50%;
          overflow: auto;
          padding: $radius-base3 $font-size-ultra-plus/4;
          box-sizing: border-box;
          p {
            color: #333;
            // margin: 0 $padding-base-half/2 $padding-base-half/4 0;
            padding: $font-size-base/2 $radius-base4/2;
            margin-bottom: $font-size-base/2;
          }
          .active {
            color: #fff;
            background-color: #3366cc;
            border-radius: $padding-base-half;
          }
        }
      }
      .search-more {
        padding: $font-size-mini/2 $font-size-mini $font-size-mini/2
          $font-size-mini;
        padding-bottom: 0;
        span {
          float: left;
          margin: $padding-base-half 0;
        }
      }
      span {
        display: inline-block;
        padding: 15px;
      }
      div {
        // margin-top: 20px;
        // border-radius: 0 0 $radius-base3 0;
        p {
          color: darkgray;
        }
      }
      .active {
        color: #fff;
        background-color: #3366cc;
        border-radius: $padding-base-half;
      }
      .area span {
        margin: 0 10px 10px;
      }
    }
    .search_btn_wrap {
      display: flex;
      // width: 100%;
      // margin-left: -60px;
      div {
        flex: 1;
        // width: 100%;
        text-align: center;
        padding: 15px 0;
        // border: 1px solid #eeeeee;
        background-color: #f7f8fa;
        border-radius: 0 0 $radius-base3 $radius-base3;
        color: #3366cc;
      }
      div:last-child {
        border-radius: 0 0 $radius-base3 0;
        // border-top: 1px solid #ccc;
        background-color: #3366cc;
        color: #fff;
      }
    }
  }
}
</style>
